<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Details</title>
		<!-- Fix for iOS Safari zooming bug -->
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta charset="utf-8" />
		
		<script src="./pako.js"></script>
		<!--封装了一个发布订阅模式-->
		<script src="./event.js"></script>
		<!--图表库js-->
		<script src="./charting_library/charting_library.min.js"></script>
		<!--websocket-->
		<script src="./websocket.js"></script>
		<!--图表数据获取-->
		<script src="./datafeed.js"></script>
		<!--图表配置-->
		<script src="./chartConfig.js"></script>
		<!-- @import url("/common/css/font.css"); -->
		<link rel="stylesheet" type="text/css" href="./font.css"/>
	</head>
	<style>
		* {
  	padding: 0;
  	margin: 0;
  }
  
  body,html{
  	background-color: #2c3039;
	height:100%;overflow:auto;margin: 0;
  }

  /* 这个下面的css是 产品周期按钮的 */

		.header {
			position: relative;
			/* height: 8vh; */
			box-shadow: 0px 10px 8px rgba(0,0,0,.05);
		}
		
		.symbol {
			display: flex;
			flex-wrap: wrap;
		}
		.symbol span {
			width: 30%;
			height: 30px;
			margin-right: 3%;
			margin-bottom: 20px;
			line-height: 30px;
			text-align: center;
			background-color: #071724;
			color: #d2daed;
			border-radius: 4px;
			font-size: 14px;
		}
		.symbol span.active {
			color: #071724;
			font-weight: 500;
			background-color: #d2daed;
		}
		
		.times {
			/* position: absolute; */
			/* bottom: 0; */
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

		.times span {
			width: 16.66%;
			height: 30px;
			line-height: 30px;
			color: #ffffff;
			font-size: 16px;
			text-align: center;
		}

		.times span.active {
			position: relative;
			color: #157fd5;
			font-weight: 500;
		}

		.times span.active:before {
			content: " ";
			position: absolute;
			bottom: -2px;
			left: 10%;
			z-index: 1;
			width: 80%;
			height: 3px;
			background-color: #157fd5;
			border-radius: 3px;
		}
	
/* 	#tv_chart_container:before {
		content: " ";
		position: fixed;
		bottom: 22%;
		left: 5%;
		z-index: 999;
		width: 9vw;
		height: 9vw;
		background-color: #fff;
	} */
  /* 这个下面的css重点关注，和k线图与关 */

  #tv_chart_container {
    width: 100%;
    height: 70vh;
  }

  iframe {
    width: 100%;
    height: 100% !important;
		
  }
	.pane-legend-line.pane-legend-wrap.main.expand-line {
	    padding-right: 5px;
	}
	.depth-content-l-item-l .depth-content-l-item-t{font-weight:bold;}
			.depth-content-l-item-r .depth-content-l-item-n{color: #9fa7ab;}
			.depth-content-r .depth-content-l-item-r{color: #e64747;font-weight:bold;}
			.depth-content-l .depth-content-l-item-r{color: #01ad8f;font-weight:bold;}
			.depth-content-title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20px 15px;
			}
			.depth-content-title .depth-content-title-item{
				font-size: 13px;
				color: #dadcde;
			}
			.depth-content{
				padding: 0 15px 50px;
				display: flex;
			}
			.depth-content .depth-content-l,.depth-content .depth-content-r{
				flex: 1;
			}
			.depth-content .depth-content-l .depth-content-l-item,.depth-content .depth-content-r .depth-content-l-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				overflow: hidden;
				font-size: 13px;
				color: #ffffff;
			}
			.depth-content .depth-content-l .depth-content-l-item .depth-content-l-item-dep,.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-dep{
				position: absolute;
				top: 0;
				height: 30px;
				width: 100%;
				z-index: -1;
			}
			.depth-content-l-item-dep.depth-content-l-item-dep-green{
				background: #325d50;
			}
			.depth-content-l-item-dep.depth-content-l-item-dep-red{
				background: #672e45;
			}
			.depth-content .depth-content-l .depth-content-l-item .depth-content-l-item-l,.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-l{
				display: flex;
				align-items: center;
				line-height: 30px;
			}
			.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-r{
				display: flex;
				align-items: center;
				line-height: 30px;
			}
			.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-r .depth-content-l-item-t{
				padding-right: 15px;
			}
			.depth-content .depth-content-l .depth-content-l-item .depth-content-l-item-l .depth-content-l-item-t,.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-l .depth-content-l-item-t{
				padding-left: 10px;
				
			}
			.hour-colo{
				padding: 0 15px;
				text-align: right;
				color: #FFFFFF;
				font-size: 13px;
			}
			
			.header-content{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 15px 20px;
			}
			.header-left{
				flex: 1;
			}
			.header-right{
				flex: 1;
			}
			.header-left .header-left-c{
				font-size: 22px;
				font-weight: bold;
			}
			.header-left .header-left-b{
				display: flex;
				align-items: center;
				color: #ffffff;
				font-size: 12px;
			}
			.header-left .header-left-b div{
				margin-right: 6px;
			}
			.header-left  .green{
				color: #37b185;
			}
			.header-left  .red{
				color: #e64746;
			}
			.header-right .header-right-l{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.header-right .header-right-l text{
				color: rgba(255,255,255,0.2);
				font-size: 12px;
			}
			.header-right .header-right-l div{
				color: #ffffff;
				font-size: 12px;
			}
			.bottom-nav{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
				z-index: 99;
				*zoom:1;
				height: 40px;
				 overflow:hidden;
				 -webkit-transform: translateZ(0);
			}
			.bottom-nav .bottom-nav-l{
				flex:1;
				background: #2fbe89;
				font-size: 12px;
				color: #ffffff;
				line-height: 40px;
				height: 40px;
				margin-right: 4px;
				text-align: center;
			}
			.bottom-nav .bottom-nav-r{
				flex:1;
				text-align: center;
				background: #f46260;
				font-size: 12px;
				color: #ffffff;
				line-height: 40px;
				height: 40px;
			}
</style>
	<body>
		
		<div class="bottom-nav">
			<div class="bottom-nav-l" hover-class="active">买入</div>
			<div class="bottom-nav-r">卖出</div>
		</div>
		
		<div class="root">
			<div class="header">
				<div class="header-content">
					
					<div class="header-left">
						<div class="header-left-c"></div>
						<div class="header-left-b">
							<div></div>
							<text class="green"></text>
						</div>
					</div>
					<div class="header-right">
						<div class="header-right-l header-right-ll">
							<text>高</text>
							<div></div>
						</div>
						<div class="header-right-l header-right-lll">
							<text>低</text>
							<div></div>
						</div>
						<div class="header-right-l header-right-llll">
							<text>24H</text>
							<div></div>
						</div>
					</div>
				</div>
				
				
				<!-- <div id="" class="24-hour hour-colo">
					
				</div> -->
				<div id="symbol" class="symbol">
				<!-- 	<span class="active" data-value="btcusdt">BTC/USDT</span>
					<span data-value="ethusdt">ETH/USDT</span>
					<span data-value="bchusdt">BCH/USDT</span>
					<span data-value="eosusdt">EOS/USDT</span>
					<span data-value="etcusdt">ETC/USDT</span> -->
				</div>
				<div class="times" id="interval">
					<!-- <span data-value="1">分时</span> -->
					<!-- <span class="active" data-value="15">15分钟</span> -->
					<!-- <span data-value="15">15分钟</span> -->
					<!-- <span data-value="60">1小时</span>
					<span data-value="240">4小时</span>
					<span data-value="1D">1日</span>
					<span data-value="1W">1周</span> -->
					
					
					
					<!-- <span data-value="1" class="fenshi">分时</span> -->
					<span class="active 15min" data-value="15">15分钟</span>
					<!-- <span data-value="15">15分钟</span> -->
					<span data-value="60" class="1hour">1小时</span>
					<span data-value="240"  class="4hour">4小时</span>
					<span data-value="1D"  class="1day">1日</span>
					<span data-value="1W"  class="1week">1周</span>
					<!-- <span data-value="1D" class="active">日线</span> -->
				</div>
			</div>
			<div class="chart">
				<div id="tv_chart_container"></div>
			</div>
			<div class="depth-content-title">
				<div class="depth-content-title-item depth-content-title-item-l demp-titl-1">买盘 数量</div>
				<div class="depth-content-title-item demp-titl-2">价格(USDT)</div>
				<div class="depth-content-title-item depth-content-title-item-l demp-titl-3">数量 卖盘</div>
			</div>
			<div class="depth-content">
				<div class="depth-content-l"></div>
				<div class="depth-content-r"></div>
			</div>
		</div>
		
		<!--页面总统js 初始化图表库 绑定点击事件等-->
		<script src="./doc-index.js"></script>
		<!-- 拦截点击logo跳转 -->
		
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript">
			var lang_type
			var timers;
			
			 $(function(){
			        //请求参数
			       
			    });
			function fuic(){
				var list = {};
				//
				$.ajax({
				    //请求方式
				    type : "POST",
				    //请求的媒体类型
				    contentType: "application/json;charset=UTF-8",
				    //请求地址
				    url : "http://hny.decentralizationloan.com/api/C2c/pkSj20",
				    //数据，json字符串
				    data : JSON.stringify(list),
				    //请求成功
				    success : function(result) {
						console.log(JSON.stringify(result)+'我是接过');
						// $('.24-hour').show()
						// $('.24-hour').html('日交易量  :' )
						var jyl_24h = result.data.jyl_24h
						var high = result.data.high
						var low = result.data.low
						var rzd = result.data.rzd
						// var rzd = '-10%'
						var zxj = result.data.zxj
						var zxj_cny = result.data.zxj_cny
						console.log(11);
						if(parseInt(rzd)>=0){
							$('.header-left-c').removeClass('red').addClass('green')
							
							$('.header-left-b text').removeClass('red').addClass('green')
						}else{
							$('.header-left-c').removeClass('green').addClass('red')
							$('.header-left-b text').removeClass('green').addClass('red')
						}
						
						
						$('.header-left-c').html(zxj)
						$('.header-left-b div').html('≈'+zxj_cny+'CNY')
						$('.header-left-b text').html(rzd)
						$('.header-right-ll div').html(high)
						$('.header-right-lll div').html(low)
						$('.header-right-llll div').html(jyl_24h)
						// $('.24-hour').html('日交易量  :  '+jyl_24h+'')
						var buyList = result.data.buy
						
						
						// high: 0.12
						// jye_24h: 34.82350159
						// jyl_24h: 299.59997559
						// low: 0.1139
						// rzd: "0%",
						// zxj: "1.3998"
						// zxj_cny: "9.09"
						// console.log(buyList.length);
						var sellList = result.data.sell
						var htmlStc
						$('.depth-content-l').html('')
						$('.depth-content-r').html('')
							if(buyList.length>0){
								var buymax = getMax(buyList)
								for (var i = 0; i < buyList.length; i++) {
									// console.log(Number(buyList[i].cnum));
									htmlStc='';
									htmlStc +='<div class="depth-content-l-item">',
									htmlStc +='<div class="depth-content-l-item-l">',
									htmlStc +='<div class="depth-content-l-item-n">',
									htmlStc +=Number(i)+1,
									htmlStc +='</div><div class="depth-content-l-item-t">',
									htmlStc +=buyList[i].cnum,   
									htmlStc +='</div></div><div class="depth-content-l-item-r">',	
									htmlStc +=buyList[i].price, 
									htmlStc +='</div><div class="depth-content-l-item-dep  depth-content-l-item-dep-green"  style="left:',
									htmlStc +=(100-parseInt(Number((buyList[i].cnum)/Number(buymax))*100)),
									htmlStc +='%;"></div></div>',
									$('.depth-content-l').append(htmlStc)
								}
							}
						
						var htmlStc1
						if(sellList.length>0){
							var sellmax = getMax(sellList)
							for (var i = 0; i < sellList.length; i++) {
								htmlStc1=''
								htmlStc1 +='<div class="depth-content-l-item"><div class="depth-content-l-item-l"><div class="depth-content-l-item-t">',
								htmlStc1 +=sellList[i].price,
								htmlStc1 +='</div></div><div class="depth-content-l-item-r"><div class="depth-content-l-item-t">',
								htmlStc1 +=sellList[i].cnum,  
								htmlStc1 +='</div><div class="depth-content-l-item-n">',
								htmlStc1 +=Number(i)+1,
								htmlStc1 +='</div></div><div class="depth-content-l-item-dep depth-content-l-item-dep-red" style="right:',
								htmlStc +=parseInt(Number((sellList[i].cnum)/Number(sellmax))*100),
								htmlStc1 +='%;"></div></div>', 
								
								$('.depth-content-r').append(htmlStc1)
							}
						}
						
						
				    },
				    //请求失败，包含具体的错误信息
				    error : function(e){
				        // console.log(e.status);
				        // console.log(e.responseText);
				    }
				});
			}
			function getMax(arr){
				var max = arr[0].cnum;
				for(var i=0,m=arr.length;i<m;i++){
				   
				   if(arr[i].num>max){
				       max = arr[i].cnum
				   }
				}
				return max;
			}
			function getQuery(name) {
				// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
				let reg = new RegExp("(^|/?)"+ name +"=([^/?]*)(/?|$)");
				// console.log(window.location.search.substr(1));
				let r = window.location.search.substr(1).match(reg);
				if(r != null) {
					// 对参数值进行解码
					return decodeURIComponent(r[2]);
				}
				return null;
			}
			// document.title =""
			  document.addEventListener('UniAppJSBridgeReady', function() {			  
				  $('.bottom-nav-l').click(function(){
					  // alert(1)
					  uni.navigateBack({
					  	delta:1
					  })
				  })
				  $('.bottom-nav-r').click(function(){
					  // alert(1)
					  uni.navigateBack({
					  	delta:1
					  })
				  })
				  $('.demp-titl-1').html(lang_type=='en'?'Buy order quantity':'买盘 数量')
				  $('.demp-titl-2').html(lang_type=='en'?'Price (USDT)':'价格(USDT)')
				  $('.demp-titl-3').html(lang_type=='en'?'Quantity Offer':'数量 卖盘')
				  $('.depth-content-title').show()
				  $('.depth-content').show()
				  fuic()
				  timers = setInterval(function(){
				  	fuic()
				  },1000)
			        // uni.postMessage({
			        //     data: {
			        //         action: 'message'
			        //     }
			        // });
					// uni.setNavigationBarTitle({
					// 	title:this.title+'/USDT'
					// })
					
					var data_ = getQuery('data')
					document.getElementsByTagName("title")[0].innerText = data_+'/USDT'
					$('.times .15min').html(lange_type=='en'?'15min':'15分钟')
					$('.times .1hour').html(lange_type=='en'?'1hour':'1小时')
					$('.times .4hour').html(lange_type=='en'?'4hour':'4小时')
					
					$('.times .1day').html(lange_type=='en'?'1day':'1日')
					$('.times .1week').html(lange_type=='en'?'1week':'1周')
					
					
					console.log(plus.storage.getItem('lang')+'我这是语言栏目');
					lang_type = plus.storage.getItem('lang')
					
					// ent-title-item-l demp-titl-1">买盘 数量</div>
					// <div class="depth-content-title-item demp-titl-2">价格(USDT)</div>
					// <div class="depth-content-title-item depth-content-title-item-l demp-titl-3">数量 卖盘</div>
					
					
					console.log(data_);
					
					
					var ws = plus.webview.currentWebview();
					ws.overrideUrlLoading({
						mode: 'reject'
					}, function(e) {
						console.log('拦截跳转 url: ' + e.url);
					})
			    });
				 
		</script>
	</body>
</html>
